<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .da{
            margin: auto;
            height: 240px;
            width: 320px;
            background-color: cadetblue;
            text-align: center;
        }
       input  .one{
           float: left;
            width: 100px;
            height: 12px;
        }
       input .two{
           float: left;
           margin-top: 30px;
           width: 100px;
            height: 12px;
       }
       .three {
           margin-top: 50px;
           width: 80px;
           height: 25px;
       }
    </style><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(25deg, #73a9AD, #90C8AC, #C4DFAA, #F5F0BB);
        }
        .login-wrapper {
            background-image: linear-gradient(25deg, #73a9AD, #90C8AC, #C4DFAA, #F5F0BB);
            width: 358px;
            height: 430px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border:1px solid #ffffff;
            backdrop-filter:blur(3px)brightness(95%);
            box-shadow:10px 10px 30px #011638;
        }
        .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 166px;
        }
        .input-item {
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128, 125, 125);
            font-size: 15px;
            outline: none;
        }
        .input-item:placeholder {
            text-transform: uppercase;
        }
        .btn {
            text-align: center;
            padding: 10px;
            width: 100%;
            margin-top: 40px;
            background-image: linear-gradient(25deg, #73a9AD, #90C8AC, #C4DFAA, #F5F0BB);
            color: #fff;
                  line-height: 30px;
        border-radius: 15px;
        }
        a {
            text-decoration-line: none;
            color: #abc1ee;
        }
           button{
            border: none;
            width: 368px;
            height: 32px;
            background-image: linear-gradient(25deg, #73a9AD, #90C8AC, #C4DFAA, #F5F0BB);
        }
    </style>
</head>
<body>
<div class="container">
        <div class="login-wrapper">
            <div class="header">登录</div>
            <form class="form-wrapper" method="post" action="/login" >
                <label for="username">账号:</label>
                <input type="text" name="username" placeholder="username" class="input-item" id="username"><br>
                    <p class="{{ category }}" style="color: red;
                display: inline;"></p>
                <label for="password">密码:</label>
                <input type="password" name="password" placeholder="password" class="input-item" id="password">
                    <p class="{{ category }}" style="color: red;
                display: inline;"></p>
                <div class="btn"><button type="submit">登录</button></div>
                <div class="btn"><a href="/register">未有账号前往注册页面</a></div>
            </form>
        </div>
</div>
</body>
</html>
</head>
<body>
<div class="da">
   <h1>用户登录</h1>
        <label for="username">账号：</label>
        <input  class="one" type="text" id="username" name="username" required><br>
        <label for="password">密码：</label>
        <input class="two" type="password" id="password" name="password" required><br>
        <input class="three" type="submit" value="登录">
    </div>
</body>
</html>